  <template>
  <div class="code-showcase min-h-screen">
    <!-- TargetCursor 效果 -->
    <TargetCursor targetSelector=".cursor-target" :spinDuration="2" :hideDefaultCursor="false" />

    <!-- TopBar 导航栏 -->
    <TopBar />

    <!-- 主内容区 -->
    <div class="relative z-10 pt-32 pb-16 px-6">
      <div class="max-w-7xl mx-auto">
        <!-- 搜索和控制栏 -->
        <div class="mb-8 flex flex-col md:flex-row gap-4 items-center justify-between">
          <!-- 搜索框 -->
          <div class="relative flex-1 max-w-2xl w-full">
            <input
              v-model="searchQuery"
              type="text"
              placeholder="搜索代码、标签或描述..."
              class="w-full px-6 py-4 rounded-full bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:outline-none focus:border-[#42d392]/50 focus:ring-2 focus:ring-[#42d392]/20 transition-all duration-300"
            />
            <svg
              class="absolute right-6 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              />
            </svg>
          </div>

          <!-- 视图切换按钮 -->
          <div class="flex gap-2 bg-white/5 rounded-full p-1 border border-white/10">
            <button
              @click="viewMode = 'grid'"
              :class="[
                'px-6 py-3 rounded-full transition-all duration-300 cursor-target',
                viewMode === 'grid'
                  ? 'bg-gradient-to-r from-[#42d392] to-[#42d392] text-white shadow-lg'
                  : 'text-gray-400 hover:text-white'
              ]"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
                />
              </svg>
            </button>
            <button
              @click="viewMode = 'list'"
              :class="[
                'px-6 py-3 rounded-full transition-all duration-300 cursor-target',
                viewMode === 'list'
                  ? 'bg-gradient-to-r from-[#42d392] to-[#42d392] text-white shadow-lg'
                  : 'text-gray-400 hover:text-white'
              ]"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 6h16M4 12h16M4 18h16"
                />
              </svg>
            </button>
          </div>
        </div>

        <!-- 标签过滤 -->
        <div class="mb-8 flex flex-wrap gap-3">
          <button
            v-for="tag in allTags"
            :key="tag"
            @click="toggleTag(tag)"
            :class="[
              'px-4 py-2 rounded-full text-sm transition-all duration-300 cursor-target',
              selectedTags.includes(tag)
                ? 'bg-gradient-to-r from-[#42d392] to-[#42d392] text-white border border-[#42d392]'
                : 'bg-white/5 border border-white/10 text-gray-300 hover:border-[#42d392]/50 hover:text-[#42d392]'
            ]"
          >
            {{ tag }}
          </button>
        </div>

        <!-- 卡片网格视图 -->
        <div v-if="viewMode === 'grid'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="item in filteredItems"
            :key="item.id"
            class="code-card group bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 p-6 hover:border-[#42d392]/50 transition-all duration-300 hover:shadow-xl hover:shadow-[#42d392]/10 cursor-target hover:-translate-y-1"
          >
            <!-- 语言标签 -->
            <div class="flex items-center justify-between mb-4">
              <span
                class="px-3 py-1 rounded-full text-xs font-semibold"
                :style="{ background: item.languageColor + '20', color: item.languageColor }"
              >
                {{ item.language }}
              </span>
              <span class="text-gray-500 text-sm">{{ item.date }}</span>
            </div>

            <!-- 标题 -->
            <h3 class="text-xl font-bold text-white mb-3 group-hover:text-[#42d392] transition-colors">
              {{ item.title }}
            </h3>

            <!-- 描述 -->
            <p class="text-gray-400 text-sm mb-4 line-clamp-3">
              {{ item.description }}
            </p>

            <!-- 标签 -->
            <div class="flex flex-wrap gap-2 mb-4">
              <span
                v-for="tag in item.tags"
                :key="tag"
                class="px-2 py-1 rounded-md bg-white/5 text-gray-400 text-xs"
              >
                {{ tag }}
              </span>
            </div>

            <!-- 底部信息 -->
            <div class="flex items-center justify-between pt-4 border-t border-white/10">
              <div class="flex items-center gap-4 text-sm text-gray-400">
                <span class="flex items-center gap-1">
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                    <path
                      fill-rule="evenodd"
                      d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                      clip-rule="evenodd"
                    />
                  </svg>
                  {{ item.views }}
                </span>
                <span class="flex items-center gap-1">
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
                    />
                  </svg>
                  {{ item.likes }}
                </span>
              </div>
              <button
                class="text-[#42d392] hover:text-[#42d392]/80 transition-colors text-sm font-semibold"
              >
                查看详情 →
              </button>
            </div>
          </div>
        </div>

        <!-- 列表视图 -->
        <div v-else class="space-y-4">
          <div
            v-for="item in filteredItems"
            :key="item.id"
            class="code-list-item group bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 p-6 hover:border-[#42d392]/50 transition-all duration-300 hover:shadow-xl hover:shadow-[#42d392]/10 cursor-target"
          >
            <div class="flex items-start gap-6">
              <!-- 左侧语言图标 -->
              <div
                class="flex-shrink-0 w-16 h-16 rounded-xl flex items-center justify-center text-2xl font-bold"
                :style="{ background: item.languageColor + '20', color: item.languageColor }"
              >
                {{ item.language.substring(0, 2) }}
              </div>

              <!-- 中间内容 -->
              <div class="flex-1 min-w-0">
                <div class="flex items-start justify-between mb-2">
                  <h3 class="text-2xl font-bold text-white group-hover:text-[#42d392] transition-colors">
                    {{ item.title }}
                  </h3>
                  <span class="text-gray-500 text-sm whitespace-nowrap ml-4">{{ item.date }}</span>
                </div>

                <p class="text-gray-400 mb-4">
                  {{ item.description }}
                </p>

                <div class="flex items-center justify-between">
                  <!-- 标签 -->
                  <div class="flex flex-wrap gap-2">
                    <span
                      v-for="tag in item.tags"
                      :key="tag"
                      class="px-3 py-1 rounded-full bg-white/5 text-gray-400 text-sm"
                    >
                      {{ tag }}
                    </span>
                  </div>

                  <!-- 统计信息 -->
                  <div class="flex items-center gap-6 text-sm text-gray-400">
                    <span class="flex items-center gap-1">
                      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                        <path
                          fill-rule="evenodd"
                          d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                          clip-rule="evenodd"
                        />
                      </svg>
                      {{ item.views }}
                    </span>
                    <span class="flex items-center gap-1">
                      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path
                          d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
                        />
                      </svg>
                      {{ item.likes }}
                    </span>
                    <button
                      class="text-[#42d392] hover:text-[#42d392]/80 transition-colors font-semibold"
                    >
                      查看详情 →
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div
          v-if="filteredItems.length === 0"
          class="text-center py-20"
        >
          <div class="text-6xl mb-4">🔍</div>
          <h3 class="text-2xl font-bold text-gray-400 mb-2">未找到相关内容</h3>
          <p class="text-gray-500">尝试调整搜索条件或标签过滤</p>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer class="footer py-8 px-6 border-t border-white/10 relative z-10">
      <div class="max-w-6xl mx-auto text-center">
        <p class="text-gray-400 text-sm">
          © 2025 <span class="font-semibold">TqCoder</span>. All rights reserved.
        </p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import TargetCursor from '@/vue-bits/Animations/TargetCursor/TargetCursor.vue'
import TopBar from '@/views/frontend/components/TopBar.vue'

// 视图模式
const viewMode = ref<'grid' | 'list'>('grid')

// 搜索关键词
const searchQuery = ref('')

// 选中的标签
const selectedTags = ref<string[]>([])

// Mock 数据
const codeItems = ref([
  {
    id: 1,
    title: 'Vue3 响应式系统实现',
    description: '深入解析 Vue3 响应式系统的核心原理，包括 Proxy、effect、track 和 trigger 的实现细节。通过源码级别的分析，帮助你理解现代前端框架的响应式设计。',
    language: 'TypeScript',
    languageColor: '#3178c6',
    tags: ['Vue3', '响应式', '源码分析'],
    date: '2025-01-15',
    views: 1234,
    likes: 89
  },
  {
    id: 2,
    title: 'React Hooks 最佳实践',
    description: '总结 React Hooks 在实际项目中的最佳实践，包括 useState、useEffect、useCallback 等常用 Hooks 的使用技巧和性能优化方案。',
    language: 'JavaScript',
    languageColor: '#f7df1e',
    tags: ['React', 'Hooks', '最佳实践'],
    date: '2025-01-12',
    views: 2156,
    likes: 145
  },
  {
    id: 3,
    title: 'Python 异步编程指南',
    description: '全面介绍 Python 异步编程的核心概念，包括 asyncio、协程、事件循环等。通过实际案例展示如何编写高性能的异步代码。',
    language: 'Python',
    languageColor: '#3776ab',
    tags: ['Python', '异步编程', 'asyncio'],
    date: '2025-01-10',
    views: 987,
    likes: 67
  },
  {
    id: 4,
    title: 'Go 并发模式详解',
    description: '深入探讨 Go 语言的并发模式，包括 goroutine、channel、select 等核心概念。学习如何构建高并发的服务端应用。',
    language: 'Go',
    languageColor: '#00add8',
    tags: ['Go', '并发', 'goroutine'],
    date: '2025-01-08',
    views: 1567,
    likes: 112
  },
  {
    id: 5,
    title: 'Rust 所有权系统入门',
    description: 'Rust 最独特的特性就是所有权系统。本文通过简单易懂的例子，帮助你理解所有权、借用和生命周期等核心概念。',
    language: 'Rust',
    languageColor: '#ce422b',
    tags: ['Rust', '所有权', '内存安全'],
    date: '2025-01-05',
    views: 2345,
    likes: 178
  },
  {
    id: 6,
    title: 'TypeScript 高级类型技巧',
    description: '探索 TypeScript 的高级类型系统，包括泛型、条件类型、映射类型等。掌握这些技巧可以让你的代码更加类型安全和优雅。',
    language: 'TypeScript',
    languageColor: '#3178c6',
    tags: ['TypeScript', '类型系统', '高级技巧'],
    date: '2025-01-03',
    views: 1890,
    likes: 134
  },
  {
    id: 7,
    title: 'Docker 容器化实战',
    description: '从零开始学习 Docker 容器化技术，包括镜像构建、容器编排、Docker Compose 等实用技能。',
    language: 'Docker',
    languageColor: '#2496ed',
    tags: ['Docker', '容器化', 'DevOps'],
    date: '2025-01-01',
    views: 3210,
    likes: 245
  },
  {
    id: 8,
    title: 'GraphQL API 设计指南',
    description: '学习如何设计和实现 GraphQL API，包括 Schema 设计、查询优化、N+1 问题解决等最佳实践。',
    language: 'GraphQL',
    languageColor: '#e10098',
    tags: ['GraphQL', 'API', '后端开发'],
    date: '2024-12-28',
    views: 1456,
    likes: 98
  },
  {
    id: 9,
    title: 'Tailwind CSS 实用技巧',
    description: '分享 Tailwind CSS 在实际项目中的使用技巧，包括自定义配置、组件封装、响应式设计等。',
    language: 'CSS',
    languageColor: '#06b6d4',
    tags: ['Tailwind', 'CSS', '前端开发'],
    date: '2024-12-25',
    views: 2678,
    likes: 189
  }
])

// 所有标签
const allTags = computed(() => {
  const tags = new Set<string>()
  codeItems.value.forEach(item => {
    item.tags.forEach(tag => tags.add(tag))
  })
  return Array.from(tags)
})

// 切换标签选择
const toggleTag = (tag: string) => {
  const index = selectedTags.value.indexOf(tag)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  } else {
    selectedTags.value.push(tag)
  }
}

// 过滤后的数据
const filteredItems = computed(() => {
  return codeItems.value.filter(item => {
    // 搜索过滤
    const matchSearch = searchQuery.value === '' ||
      item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      item.description.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      item.tags.some(tag => tag.toLowerCase().includes(searchQuery.value.toLowerCase()))

    // 标签过滤
    const matchTags = selectedTags.value.length === 0 ||
      selectedTags.value.some(tag => item.tags.includes(tag))

    return matchSearch && matchTags
  })
})
</script>

<style scoped>
.code-showcase {
  background: linear-gradient(to bottom right, #050505, #0a0a0a, #0d0d0d);
  position: relative;
  min-height: 100vh;
}

.code-card {
  animation: fadeInUp 0.5s ease-out backwards;
}

.code-list-item {
  animation: fadeInUp 0.5s ease-out backwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 为卡片添加延迟动画 */
.code-card:nth-child(1),
.code-list-item:nth-child(1) {
  animation-delay: 0.05s;
}

.code-card:nth-child(2),
.code-list-item:nth-child(2) {
  animation-delay: 0.1s;
}

.code-card:nth-child(3),
.code-list-item:nth-child(3) {
  animation-delay: 0.15s;
}

.code-card:nth-child(4),
.code-list-item:nth-child(4) {
  animation-delay: 0.2s;
}

.code-card:nth-child(5),
.code-list-item:nth-child(5) {
  animation-delay: 0.25s;
}

.code-card:nth-child(6),
.code-list-item:nth-child(6) {
  animation-delay: 0.3s;
}

/* 文本截断 */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
